<%@page import="java.util.UUID"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/common/taglib.jsp" %>
<%
    String uuid = UUID.randomUUID().toString();
    request.setAttribute("uuid", uuid);
%>
<div class="container-fluid am-margin-top-sm" >
<form id="form_${uuid}">
	<input type="hidden" name="id" v-model="id">
	<input type="hidden" name="dataModelId" v-model="dataModelId">
	<input type="hidden" name="sn">
	<!-- 表单内容 -->
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active">
			<a href="#${uuid}_fieldDataTab" role="tab" data-toggle="tab">
				<span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
				数据模型
			</a>
		</li>
		<li role="presentation">
			<a href="#${uuid}_formViewTab" role="tab" data-toggle="tab">
				<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
				表单视图
			</a>
		</li>
	</ul>
	<div class="tab-content">
	<div role="tabpanel" class="tab-pane fade in  active am-margin-top-sm" id="${uuid}_fieldDataTab">
		<div class="row">
	    	<div class="col-sm-6">
	    		<div class="form-group">
				  	<label>中文名</label>
			     	<input type="text" name="name" check-type="required" class="form-control" v-on:blur="tranToCodeVal" v-model="name">
				  </div>
	    	</div>
	    	<div class="col-sm-6">
	    		<div class="form-group">
				  	<label>字段名</label>
			     	<input type="text" name="code" check-type="required" class="form-control" v-model="code">
				  </div>
	    	</div>
		</div>
		<div class="row">
	    	<div class="col-sm-12">
	    		<div class="form-group">
				  	<label>备注</label>
			     	<input type="text" name="remarks" class="form-control">
				  	<p class="help-block">如果不设置，则默认采用中文名作为备注.</p>
				  </div>
	    	</div>
		</div>
		
		
		<div class="row">
			<div class="col-sm-6">
	    		<div class="form-group">
				  	<label>配置</label>
			     	<div>
			     		<span class="am-margin-left-sm"><input type="checkbox" name="isPrimaryKey" value="1">主键</span>
			     		<span class="am-margin-left-sm"><input type="checkbox" name="isRequired" value="1">必填</span>
			     		<span class="am-margin-left-sm"><input type="checkbox" name="isFlowvar" value="1">流程变量</span>
			     		<span class="am-margin-left-sm"><input type="checkbox" name="checkDuplicate" value="1">重复项检查</span>
			     	</div>
				  </div>
	    	</div>
		
			<div class="col-sm-6">
				<div class="form-group">
				  	<label>字段类型</label>
			     	<select name="type" class="form-control" v-model="type" v-on:change="changeType" >
			             <pf:dataDic var="item" dicCode="TABLE_DEF_FIELD_TYPE">
			                 <option value="${item.value}">${item.name}</option>
			             </pf:dataDic>
			         </select>
				  </div>
			</div>
			
		</div>
		
		<div class="row">
			
	    	<div class="col-sm-6" v-show="canSetDefaultVal">
	    		<div class="form-group">
				  	<label>默认值</label>
			     	<input type="text" name="defaultValue" class="form-control" >
				  </div>
	    	</div>
	    	
	    	<div class="col-sm-6" v-show="canSetLen">
				<label>长度</label>
			  	<div>
		     		<span><input type="text" name="size" value="255" class="form-control" style="display: inline;width: 80px"></span>
		     		<span v-show="canSetScale">小数位：<input type="text" name="scale" value="0" class="form-control" style="display: inline;width: 40px"></span>
		     	</div>
			</div>
		</div>
		
		
		<div class="row" v-show="canSetRelDataModel">
	    	<div class="col-sm-6">
	    		<div class="form-group">
				  	<label>关联模型</label>
			     	<input type="text" name="relDataModelCode" class="form-control">
				  </div>
	    	</div>
	    	<div class="col-sm-6" v-show="canSetRelDataModelFieldCode">
	    		<div class="form-group">
				  	<label>关联字段</label>
			     	<input type="text" name="relDataModelFieldCode" class="form-control">
				  </div>
	    	</div>
		</div>
		
		<div class="row" v-show="canSetMultiRelDataModelCode">
	    	<div class="col-sm-6">
	    		<div class="form-group">
				  	<label>中间关联模型</label>
			     	<input type="text" name="multiRelDataModelCode" class="form-control">
			     	<p class="help-block">如果不设置,则由系统自动生成中间关联表.</p>
				  </div>
	    	</div>
	    	<div class="col-sm-6">
	    		
	    	</div>
		</div>
		
		<div class="row" v-show="canSetRelDataModel">
	    	<div class="col-sm-6">
	    		<div class="form-group">
				  	<label>关联查询视图</label>
			     	<input type="text" name="relQueryDefCode" class="form-control">
				  	<p class="help-block">如果不设置,则默认使用关联模型对应的查询视图.</p>
				  </div>
	    	</div>
	    	<div class="col-sm-6">
	    		<div class="form-group">
				  	<label>显示字段</label>
			     	<input type="text" name="relDataModelViewFieldCode" class="form-control">
				  	<p class="help-block">关联后显示在本模型的字段,即除了id外,用于显示的值.</p>
				  </div>
	    	</div>
		</div>
		
	</div>
	<div role="tabpanel" class="tab-pane fade am-margin-top-sm" id="${uuid}_formViewTab">
		<div class="row">
			<div class="col-sm-6">
				<div class="form-group">
			  	<label>控件类型</label>
		     	<select name="controlType" class="form-control" >
		             <pf:dataDic var="item" dicCode="TABLE_DEF_CTR_TYPE">
		                 <option value="${item.value}">${item.name}</option>
		             </pf:dataDic>
		         </select>
			  </div>
			</div>
			<div class="col-sm-6">
					<label>占用空间</label>
					<select name="ctlRequiredSpace" class="form-control" >
			             <pf:dataDic var="item" dicCode="FRM_CTR_REQUIRED_SPACE">
			                 <option value="${item.value}">${item.name}</option>
			             </pf:dataDic>
		         	</select>
			</div>
		</div>
		
		<div class="row" >
			<div class="col-sm-6">
				<div class="form-group">
			  	 <div class="controlTypeSetting" id="controlTypeSetting_dataDicCode">
					 <label>字典编码</label>
				     <input type="text" name="dataDicCode" class="form-control" >
			     </div>
			  </div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
				  	<label class="am-margin-right">日期格式</label><input type="checkbox" name="isDefaultTime" value="1">使用系统时间
			     	<input type="text" name="dateTimeFormat" value="yyyy-MM-dd HH:mm:ss" class="form-control" >
				  </div>
			</div>
		</div>
		
		
		
		<div class="row controlTypeSetting" id="controlTypeSetting_options">
		  <div class="col-sm-12 form-group">
		  	<label>选择项</label>
	     	<textarea name="options"  class="form-control"></textarea>
	     	<p class="help-block">格式:[{'title':'','value':'','isDefault':'true'},{'title':'','value':''}]</p>
	     	
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-12 ">
		  	<div class="form-group">
			  	<label>其他选项</label>
		     	<div>
		     		<span class="am-margin-left-sm"><input type="checkbox" name="isSingleSelect" value="1">是否单选</span>
		     		<span class="am-margin-left-sm"><input type="checkbox" name="isSetCurrentSession" value="1">是否设置当前会话</span>
		     	</div>
	     	</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-12 form-group">
		  	<label>验证配置</label>
	     	<div>
	     		<span class="am-margin-left-sm">
	     			<input type="checkbox" name="viewCheckType" value="required">是否必填
	     		</span>
	     		<span class="am-margin-left-sm">
	     			<input type="checkbox" name="viewCheckType" value="number">是否数值
	     		</span>
	     		<span class="am-margin-left-sm">
	     			<input type="checkbox" name="viewCheckType" value="mail">邮件
	     		</span>
	     		<span class="am-margin-left-sm">
	     			<input type="checkbox" name="viewCheckType" value="char">英文字母
	     		</span>
	     		<span class="am-margin-left-sm">
	     			<input type="checkbox" name="viewCheckType" value="chinese">汉字
	     		</span>
	     		<span class="am-margin-left-sm">
	     			<input type="checkbox" name="viewCheckType" value="url">url
	     		</span>
	     		<span class="am-margin-left-sm">
	     			<input type="checkbox" name="viewCheckType" value="mobile">手机号
	     		</span>
	     		<span class="am-margin-left-sm">
	     			<input type="checkbox" name="viewCheckType" value="idcard">身份证
	     		</span>
	     	</div>
		  </div>
		</div>
	</div>
	</div>
	<!-- 表单内容 End -->
   
   	<div class="form-group">
   		<a href="javascript:void(0);" id="${uuid}_submitBt" class="btn btn-primary pull-right" v-on:click="submit">提交</a>
   	</div>
</form>
</div>

<script type="text/javascript">
$(function(){
	var uuid = '${uuid}';
	var form = $("#form_" + uuid);
	var formValidation=form.validation();
	
	requirejs(['vue/vue'],function(Vue) {
		var vm = new Vue({
			  el:"#form_" + uuid,
			  data: {
				  type:"varchar",
				  canSetLen:true,
				  canSetScale:false,
				  canSetDefaultVal:true,
				  canSetRelDataModel:false,
				  canSetRelDataModelFieldCode:false,
				  canSetDateTimeFormat:false,
				  canSetMultiRelDataModelCode:false,
				  dataModelId:'${param.dataModelId}',
				  code:"",
				  name:"",
				  id:''
			  },
			  ready:function(){
				  this.id='${param.id}';
				  if(this.id){
					  var that=this;
					  $.getJSON(ctx + '/dataModelFieldDefAct/findById.do',{id : this.id},function(data){
							if(data){
								that.type=data.type;
								that.code=data.code;
							  	webUtils.fullForm({
									form : $(that.$el),
									data : data
								});
							  	
							  	
							}
						});
				  }
			  },
			  watch:{
				  type:function(){
					  if(this.type=="varchar" || this.type=="number"){
						  this.canSetLen=true;
					  }else{
						  this.canSetLen=false;
					  }
					  
					  if(this.type=="number"){
						  this.canSetScale=true;
					  }else{
						  this.canSetScale=false;
					  }
					  
					  if(this.type=="varchar" || this.type=="number"  || this.type=="blob"){
						  this.canSetDefaultVal=true;
					  }else{
						  this.canSetDefaultVal=false;
					  }
					  
					  if(this.type=="varchar"){
						  canSetDateTimeFormat=true;
					  }else{
						  canSetDateTimeFormat=false;
					  }
					  
					  
					  if(this.type=="singleRef" || this.type=="multipleRef" || this.type=="subModel"){
						  this.canSetRelDataModel=true;
						  if(this.type=="subModel"){
							  this.canSetRelDataModelFieldCode=true;
						  }else{
							  this.canSetRelDataModelFieldCode=false;
						  }
						  
						  if(this.type=="multipleRef"){
							  this.canSetMultiRelDataModelCode=true;
						  }else{
							  this.canSetMultiRelDataModelCode=false;
						  }
						  
						  
					  }else{
						  this.canSetRelDataModel=false;
					  }
				  }
			  },
			  methods:{
				  submit:function(){
					  if (isValid()) {
							$(this.$el).ajaxSubmit({
								url : ctx + '/dataModelFieldDefAct/saveDef.do',
								data : {},
								type : "POST",
								success : function(data) {
									if (data.success) {
										webUtils.alert("提交成功");
										top.webUtils.topicPublish(
												"fieldDefine.edit.success", data);
									} else {
										webUtils.error(data.msg);
									}
								}
							});
						}
				  },
				  changeType:function(){},
				  tranToCodeVal:function(){
					  var that=this;
					  if(that.name && !that.code){
						  webUtils.getShortPinyin(this.name,function(r){
							  that.code=r;
						  });
					  }
				  }
			  }
			});
	});
	
	function isValid(){
    	return formValidation.valid();
    }
});
</script>